<template>
  <div class="app">
    <div class="biaodan">
      <form class="biao">
        <div class="liebiao" v-for="(itme,index) in lables">
          <span class="span1"><i :class="labclass[index]"></i>{{itme}}</span>
          <input  @input="chufa($event,index)" type="text">
          <div class="wk">
            <div class="spantext" :style="{height:hegit+'px'}">
              <span class="biaoqian">{{lables1[index]}}</span>
            </div>
          </div>
        </div>
        <input class="tijiao" value="提交"  type="button" @click="tijiao">
      </form>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'login',
    data(){
      return{
        lables:['姓名','身份证号码','联系方式','店铺名称'],
        labclass:['el-icon-user','el-icon-user-solid','el-icon-s-finance','el-icon-s-shop'],
        lab:[], lables1:[], hegit:0
      }
    },
    computed:{
    },
    methods: {
      chufa(e, index) {
        //姓名信息验证（不能是符号）
        var userXingming = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
        //手机号信息验证（11位数）
        var Shouji = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[2-8]|18[0-9]|(19[1|3])|(19[5|6])|(19[8|9]))\d{8}$/;
        //身份证验证
        var ShenFenZheng =/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        let pan = e.target.value;
        if (!userXingming.test(pan) && index == 0) {
          this.lables1 = ['用户名输入不正确', '', '', '']
          this.hegit = 20
          this.lab[0] = ''
        } else if(index == 0) {
          this.lables1 = ''
          this.lab[0] = e.target.value
          this.hegit =0
        }
        if (!ShenFenZheng.test(pan)&& index == 1) {
          this.lables1 = ['', '身份证号码输入不正确', '', '']
          this.hegit = 20
          this.lab[1] = ''
        } else if(index == 1){
          this.lables1 = ''
          this.lab[1] = e.target.value
          this.hegit =0
        }
        if (!Shouji.test(pan)&& index == 2) {
          this.lables1 = ['', '', '联系方式输入不正确', '']
          this.hegit = 20
          this.lab[2] = ''
        } else if(index == 2){
          this.lables1 = ''
          this.lab[2] = e.target.value
          this.hegit =0
        }
        if (!userXingming.test(pan)&&index == 3) {
          this.lables1 = ['', '', '', '店铺命名不规则']
          this.hegit = 20
          this.lab[3] = ''
        } else if(index == 3) {
          this.lables1 = ''
          this.lab[3] = e.target.value
          this.hegit = 0
        }
      },
      tijiao(){
        if (this.lab[0] === ''||this.lab[0]==null) {
          this.$message.error('用户名必须输入');
        } else if (this.lab[1] === ''||this.lab[1] ==null) {
          this.$message.error('身份证号码必须输入');
        }
        else if (this.lab[2] === ''||this.lab[2] ==null) {
          this.$message.error('联系方式必须输入');
        } else if (this.lab[3] === ''||this.lab[3] ==null) {
          this.$message.error('店铺名称必须输入');
        } else {
          this.$message.success('成功注册为武商网店长')
          this.$router.push({
            path:'/form',
            query:{
              dataforms:this.lab
            }
          })
        }
      }
    }
  }
</script>
<style scoped>
  @import "../assets/css/base.css";
  .wk{
    height: 20px;
  }
  .spantext{
    transition: height 500ms ease-in-out;
    overflow: hidden;
  }
  .app{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    background: url("../assets/img/wushang.jpg");
    font-family: 楷体;
    position: absolute;
    z-index: -99;
  }
  .biaodan{
    margin-top: 15%;
    width: 90%;
    height:500px;
    float: left;
    border-radius: 15px;
    background-color: white;
  }
  .biao{
    border-radius: 10px;
  }
  input{
    height: 30px;
    width: 90%;
    border: 1px solid
  }
  .liebiao{
    width: 96%;
    height:110px;
    box-sizing: border-box;
    margin-left: 2%;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  span{
    display: inline-block;
    padding-bottom: 5px;
  }
  .span1{
    padding-top: 10px;
  }
  input{
    outline: none;
    border-radius: 10px;
  }
  .liebiao input{
    border: 1px solid rgb(220,223,230);
    box-sizing: border-box;
  }
  .liebiao input:hover{
    border: 1px solid rgb(192,196,204);
  }
  .liebiao input:active{
    border: 1px solid rgb(64,158,255);
  }
  .tijiao{
    background-color:rgb(64,158,255);
    width: 70px;
    height: 40px;
    margin-left: 50%;
    transform: translateX(-50%);
    border: none;
  }
  .biaoqian {
    color: red;
  }
</style>
